import Layouts from '@/components/Layout';
import banner from '../../../public/images/blog-bg.jpg';
import React, { useState, useEffect } from 'react';
import './index.less';
import { Button, Card, Pagination, Spin, Typography } from 'antd';
import HotArticle from '@/components/HotArticle';
import { history } from 'umi';
import { getBlogList } from '@/service/api/blog';
import { BlogList } from '@/types/blog';
import dayjs from 'dayjs';
import configs from '../../../config/env';
const tl = () => {
  return (
    <div className="blog_banner_wrapper">
      <img src={banner} alt="" />
      <div className="hero_nfo">
        <h1>超越边界</h1>
        <h2>来自我们社区的冒险故事</h2>
      </div>
    </div>
  );
};
const Blog: React.FC = () => {
  const [blogList, setBlogList] = useState<BlogList[]>([]);
  const [searchBlogQuery, setSearchBlogQuery] = useState<{
    pageNum: number;
    pageSize: number;
  }>({
    pageNum: 1,
    pageSize: 5,
  });
  const [listLoading, setListLoading] = useState<boolean>(false);
  const [listTotal, setListTotal] = useState<number>(0);
  const [hotBlogList, setHotBlogList] = useState<BlogList[]>([]);
  const toDetail = (id: number) => {
    history.push('/blog-detail/' + id);
  };
  const toFeedDetail = (id: number) => {
    history.push('/feed-detail/' + id);
  };
  const getBlogListData = async () => {
    try {
      setListLoading(true);
      const { rows, total }: { rows: BlogList[]; total: number } = await getBlogList(
        searchBlogQuery,
      );
      setBlogList(rows);
      setListTotal(total);
    } finally {
      setListLoading(false);
    }
  };
  function handleChangePage(page: number, pageSize: number) {
    setSearchBlogQuery({
      pageNum: page,
      pageSize,
    });
  }
  useEffect(() => {
    getBlogListData();
  }, [searchBlogQuery]);
  useEffect(() => {
    getBlogList({
      pageNum: 1,
      pageSize: 5,
      isHot: 1,
    }).then(({ rows }: { rows: BlogList[] }) => {
      setHotBlogList(rows);
    });
  }, []);
  return (
    <Layouts tl={tl()}>
      <div className="blog_wrppaer">
        <div className="left_wrapper">
          <Card title="最近的帖子" className="left_card">
            <Spin tip="正在玩命加载..." size="large" spinning={listLoading}>
              {blogList.map((item) => (
                <div className="blog_article_item" key={item.id}>
                  {item.imgUrl && (
                    <div
                      className="top_img"
                      onClick={() => {
                        toDetail(item.id);
                      }}
                    >
                      <img
                        src={configs[process.env.API_ENV as any].API_SERVER + item.imgUrl}
                        alt=""
                      />
                    </div>
                  )}
                  <div className="bottom_info">
                    <h2
                      onClick={() => {
                        toDetail(item.id);
                      }}
                    >
                      {item.title}
                    </h2>
                    <Button
                      type="link"
                      style={{ paddingLeft: 0 }}
                      onClick={() => {
                        toFeedDetail(item.user.userId);
                      }}
                    >
                      作者：{item.user.nickName}
                    </Button>
                    <div className="content">
                      <Typography.Paragraph ellipsis={{ rows: 2 }}>
                        {item.remark}
                      </Typography.Paragraph>
                    </div>
                    <Button
                      type="primary"
                      onClick={() => {
                        toDetail(item.id);
                      }}
                    >
                      阅读更多
                    </Button>
                  </div>
                  <div className="article_date">
                    <div className="month">
                      {dayjs(item.createTime)
                        .format('MM')
                        .replace(/\b(0+)/gi, '')}
                      月
                    </div>
                    <div className="day">{dayjs(item.createTime).format('DD')}</div>
                  </div>
                </div>
              ))}
            </Spin>
            <div className="pagination_wrapper">
              {listTotal !== 0 && (
                <Pagination
                  current={searchBlogQuery.pageNum}
                  total={listTotal}
                  showTitle
                  pageSize={searchBlogQuery.pageSize}
                  showSizeChanger={false}
                  onChange={handleChangePage}
                />
              )}
            </div>
          </Card>
        </div>
        <div className="right_wrapper">
          <Card title="热门的帖子">
            {hotBlogList.map((item) => (
              <HotArticle
                key={item.id}
                id={item.id}
                title={item.title}
                imgUrl={item.imgUrl}
              ></HotArticle>
            ))}
          </Card>
        </div>
      </div>
    </Layouts>
  );
};
export default Blog;
